<template>
  <div>
    <el-card v-loading="dataListLoading" shadow="never" class="aui-card--fill el-card-contabs">
      <el-tabs type="border-card" class="main-content-border-tabs">
        <el-tab-pane v-for='(value,key,index) in dataList' :key="index" :label="$getDictLabel('BPM_FORM_TYPE', key)">
          <ul class="colorful-list clearfix">
            <li v-for="v in value" :key="v.id">
              <div class="colorful-list-item" @click="viewHandle(v)">
                <div class="colorful-list-item__container">
                  <i class="colorful-list-item__icon"></i>
                  <h3>{{ v.name }}</h3>
                  <p class="colorful-list-item__desc" v-if="v.remark">{{v.remark}}</p>
                  <p>编号：{{v.type}}</p>
                  <div class="colorful-list-item__btn">新建流程 <i class="el-icon-right"></i></div>
                </div>
              </div>
              <!-- <el-card style="margin: 10px 10px 10px 10px;height: 150px">
                <div style="cursor:pointer;" @click="viewHandle(v.id,v.menuId)">
                  <span style="font-size: 16px;font-family: PingFang SC"> {{v.name}}</span>
                  <div style="margin-top:20px;font-size: 12px">
                    <span style="color: #0063ff">●</span>
                    <span> 流程编号:{{v.type}}</span>
                  </div>
                  <div style="margin-top: 10px;font-size: 12px">
                    <span style="color: #0063ff">●</span>
                    <span> 备注:   {{v.remark}}</span>
                  </div>
                </div>
              </el-card> -->
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
      <!--      <el-container v-for='(value,key,index) in dataList' :key="index">-->
      <!--        <el-header style="height: 20px;"><span>{{$getDictLabel('BPM_FORM_TYPE', key)}}</span>-->
      <!--          <el-divider></el-divider>-->
      <!--        </el-header>-->
      <!--        <el-main>-->
      <!--          <el-row :gutter="20">-->
      <!--            <el-col :span="4" v-for="v in value" :key="v.id">-->
      <!--              <div class="grid-content bg-purple">-->
      <!--                <el-button style="width:150px;height:50px; margin-top:20px" @click="viewHandle(v.id,v.menuId)">-->
      <!--                  {{v.name}}-->
      <!--                </el-button>-->
      <!--              </div>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--        </el-main>-->
      <!--      </el-container>-->
    </el-card>
  </div>
</template>
<style scoped>
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 5px 0;
}

.el-main {
  padding: 0 20px 20px 20px;
}
</style>

<script>
import { moduleRoutes } from '../../../router'
export default {
  data () {
    return {
      getDataListURL: '/flowable/bpmProcBiz/def',
      dataListLoading: false,
      dataForm: {
        name: '',
        modelKey: ''
      },
      dataList: [],
      listColorArr: ['#f4587c', '#30c894', '#f8be4e', '#737df3', '#f83f66', '#29c2f4', '#5597f8', '#abcb3b', '#5b5bf2', '#6e6460', '#b175f5']
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http.get(
        this.getDataListURL,
        {
          params: {
            ...this.dataForm
          }
        }
      ).then(({ data: res }) => {
        console.log(res)
        this.dataListLoading = false
        this.dataList = []
        if (res.code !== 0) {
          this.dataList = []
          this.total = 0
          return
        }
        this.dataList = res.data
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    // 申请表单
    viewHandle (data) {
      this.visible = false
      this.$nextTick(() => {
        this.gotoRouteHandle(data, { formId: data.id, edit: true })
      })
    },
    /**
     * 发起申请弹出路由
     * 原表单路由在菜单已经配置
     * 新开的路由必须重写 path 和 name
     * 否则刷新 不会跳转回到申请页
     * @param menuId
     * @param params
     * @returns {*}
     */
    gotoRouteHandle (data, params) {
      var routeName = this.$route.name + `__` + data.menuId + `__` + data.id
      // var name = 'sys-dictdata'
      // var routeName = name + `__${dictType.id}`
      var route = window.SITE_CONFIG['dynamicRoutes'].filter(item => item.name === routeName)[0]
      if (route) {
        return this.$router.push({ name: routeName, params: params })
      }
      // 否则: 添加并全局变量保存, 再跳转
      route = {
        path: 'bpmProcBiz-add?' + `formId=${data.id}`,
        oldName: 'flowable-bpmProcBiz-add',
        component: () => import(`@/views/modules/` + data.url),
        name: routeName,
        meta: {
          ...window.SITE_CONFIG['contentTabDefault'],
          menuId: this.$route.meta.menuId,
          title: `发起申请 - ${data.name}`
        }
      }
      this.$router.addRoutes([
        {
          ...moduleRoutes,
          name: `main-dynamic__${route.name}`,
          children: [route]
        }
      ])
      window.SITE_CONFIG['dynamicRoutes'].push(route)
      this.$router.push({ name: route.name, params: params })
      // 判断路由是否一致 不一致重新生成 一致直接跳转
      // if (route.name !== routeName) {
      //   window.SITE_CONFIG['dynamicMenuRoutes'].forEach(item => {
      //     if (item.meta.menuId === menuId) {
      //       item.path = routeName
      //       item.name = routeName
      //     }
      //   })
      //   this.$router.addRoutes([
      //     {
      //       ...moduleRoutes,
      //       name: `main-dynamic__${route.name}`,
      //       // meta: { title: '主入口布局' },
      //       children: [route]
      //     }
      //   ])
      // }
      // 跳转路由
      // this.$router.push({ name: route.name, params: params || route.params })
    }
  }
}
</script>
